import React,{useState,useRef,useEffect} from 'react'

import axios from 'axios'
import { useNavigate } from 'react-router-dom'
export default function ren() {
    const navigate = useNavigate()
    useEffect(() => {
        startCamera();
    }, []);
    const videoRef = useRef(null);
    const canvasRef = useRef(null);
    const [capturedImages, setCapturedImages] = useState([]);
    const startCamera = async () => {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.current.srcObject = stream;
    };
    const capture = () => {
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');
        context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
        const imageSrc = canvas.toDataURL('image/jpeg');
        setCapturedImages([...capturedImages, imageSrc])
        submitImages(imageSrc)
    };
    let submitImages = async (img) => {
        let data = await axios.post('http://127.0.0.1:3000/faceLogin', { b64: img })
        if (data.data.code === 200) {
            // Toast('登录成功')
            localStorage.setItem('accessToken',data.data.accessToken)
            localStorage.setItem('refreshToken',data.data.refreshToken)
            navigate('/app/home')
        } else {
            Toast(data.data.msg)
        }
    };
    //导航头回退
    let headgo =()=>{
        navigate(-1)
    }
  return (
    <div>
        <div id = 'faceLogin_video'>
            <video ref={videoRef} autoPlay />

        </div>
        <canvas ref={canvasRef} style={{display:'none'}} />
        <div id='button' style={{marginTop:'30px',margin:'0 auto' ,textAlign:'center'}}>
            <button style={{width:'300px',height:'40px',background:'#4986f2',color:'#fff',border:'none',borderRadius:'20px'}} onClick={()=>{capture()}}>登录</button>
        </div>
        <div id='fotter'>

        </div>
    </div>
  )
}
